<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
	$(document).ready(function(){
		$("#flip").click(function(){
			$("#panel").slideDown("slow");
		});
	});
</script>

<style type="text/css">
#panel, #flip{
	padding:5px;
	text-align:center;
	background-color: #FAF4C0;
	border: solid 1px #c3c3c3;
	}
#panel{
	padding:50px;
 	display: none; 
	}
</style>
</head>
<body>

<div id="flip">Click to slide down panel</div>
<div id="panel">PanelPanelPanel</div>
</body>
</html>